<script setup>
    import { ref, computed } from 'vue'
    import markdownLogo from '../../common/image/markdown.png'
    import markdown from './modules/markdown.vue';

    const tools = ref([
        {
            key: 'markdown',
            title: 'AI思维导图',
            desc: '直接创建，智能生成思维导图，支持多种格式多种模式导出',
            logo: markdownLogo,
            compontent: markdown
        }
    ])

    const active = ref()
    const activeTool = computed(() => {
        return active.value ? tools.value.find(item => item.key === active.value) : null
    })
</script>

<template>
    <div class="pagewarp" v-if="! active">
        <div class="tools-list">
            <div
                class="tools_card flex flex-col"
                v-for="tool in tools"
                :key="tool.key"
            >
                <div class="flex align-center">
                    <div style="width: 42px; height: 42px;">
                        <img class="w-full h-full" :src="tool.logo">
                    </div>
                    <div class="card_title flex-1 ml-10">
                        {{ tool.title }}
                    </div>
                </div>
                <div class="mt-20 flex-1 card_info">
                    {{ tool.desc }}
                </div>
                <div class="flex justify-end mt-10">
                    <a-button style="border-radius: 9999px;" type="primary" @click="() => active = tool.key">进入</a-button>
                </div>
            </div>
        </div>
    </div>
    <template v-else>
        <component :is="activeTool.compontent" @back="() => active = null"/>
    </template>
</template>

<style lang="less" scoped>
    .pagewarp {
        max-width: 1000px;
        padding: 20px;
        margin: 0 auto;

        .tools-list {
            padding: 10px 0px;
            display: grid;
            grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
            overflow-y: auto;
            padding-top: 20px;
            padding-bottom: 20px;
            grid-template-rows: auto;
            grid-gap: 20px;

            .tools_card {
                border-radius: 16px;
                padding: 18px 20px;
                position: relative;
                background-color: #fff;
                cursor: pointer;

                .card_title {
                    font-size: 15px;
                    font-weight: 700;
                    overflow: hidden;
                }

                .card_info {
                    font-size: 13px;
                    color: #888888;
                }
            }
        }
    }
</style>